<template>
  <form action="#" @submit.prevent="submit()">
    <div class="absolute top-8 left-8" @click="back()">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="w-6 h-6 hover:text-primary">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
      </svg>
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">歌曲名</span>
      </label>
      <input v-model="song.name" type="text" placeholder="..." class="input input-bordered"/>
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">歌手</span>
      </label>
      <input v-model="song.singer" type="text" placeholder="..." class="input input-bordered"/>
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">作词</span>
      </label>
      <input v-model="song.lyricist" type="text" placeholder="..." class="input input-bordered"/>
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">作曲</span>
      </label>
      <input v-model="song.composer" type="text" placeholder="..." class="input input-bordered"/>
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">简介</span>
      </label>
      <input v-model="song.remark" type="text" placeholder="..." class="input input-bordered"/>
    </div>
    <button
        :class="[{'btn-ghost btn-disabled cursor-not-allowed':isLoading==true},'  form-control mt-6 w-full btn btn-success flex-row']">
      <span :class="[{'loading loading-spinner':isLoading==true}]"></span>
      <input type="submit" class="" value="上传"/>
    </button>
  </form>
</template>

<script setup lang="ts">

import {useSongStore} from "../../plugins/pinia.ts";
import {reactive, ref, watch} from "vue";
import {Constant, Song} from "../../hook/Constant.ts";
import {hook_getUser} from "../../hook/UserHook.ts";
import {useQiniuStorage} from "../../plugins/qiniu.ts";

function back() {
  history.go(-1)
}

let song = reactive(new Song())
let fileName:string = useSongStore().song.url['name'];
song.name = fileName.substring(0, fileName.lastIndexOf("."))

function submit() {
  let songStore = useSongStore();

  //1.保存信息
  songStore.song.name = song.name;
  songStore.song.singer = song.singer;
  songStore.song.lyricist = song.lyricist;
  songStore.song.composer = song.composer;
  songStore.song.remark = song.remark;
  songStore.song.userId = hook_getUser().id;
  //2.上传歌曲
  songStore.upload()
}

let isLoading = ref(false)
watch(() => useQiniuStorage().isUpdateStatus, (value) => {
  if (value == Constant.LOADING) {
    isLoading.value = true
  } else if (value == Constant.SUCCESS || value == Constant.ERROR) {
    isLoading.value = false
  }
})

</script>

<style scoped>

</style>